[textlint] VS Code で Markdown ファイル保存時に、日本語と英数字の間に半角スペースを自動挿入する

若槻龍太

2023.09.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX 事業本部 Delivery 部の若槻です。

textlint を使用すると、Text や Markdown ファイルに対する lint を行うことができます。

今回は、textlint を使用して、VS Code（Visual Studio Code）で Markdown ファイル保存時に、「日本語と英数字の間に半角スペースを自動挿入」する設定をしてみました。

Prettier 3.0 では「日本語および英数字の間のスペース自動挿入」が無効になった

もともと「日本語および英数字の間のスペース自動挿入」の機能 Prettier で利用可能でしたが、バージョン 3.0 より機能が廃止されました。

Stop inserting spaces between Chinese or Japanese and Western characters
Previously, Prettier would insert spaces between Chinese or Japanese and Western characters (letters and digits). While some people prefer this style, it isn’t standard, and is in fact contrary to official guidelines. Please see here for more details. We decided it’s not Prettier’s job to enforce a particular style in this case, so spaces aren’t inserted anymore, while existing ones are preserved. If you need a tool for enforcing spacing style, consider textlint-ja or lint-md (rules space-round-alphabet and space-round-number).

そして代わりに textlint の textlint-rule-ja-space-between-half-and-full-width というルールが代替として紹介されています。

textlint-rule-ja-space-between-half-and-full-width を使ってみる

textlint-rule-ja-space-between-half-and-full-width を使った「日本語および英数字の間のスペース自動挿入」を設定してみます。

パッケージをインストール

npm install -D textlint 
npm install -D textlint-rule-preset-ja-spacing

.textlintrc ファイルの作成

次のコマンドを実行します。

npx textlint --init

これにより次の内容のファイルが作成されます。

{
  "plugins": {},
  "filters": {},
  "rules": {}
}

ルールはデフォルトでは次のようになっているので、必要に応じてルールのインストールと設定変更を行います。

{
  "rules": {
    "preset-ja-spacing": {
      "ja-nakaguro-or-halfwidth-space-between-katakana": true,
      "ja-no-space-around-parentheses": true,
      "ja-no-space-between-full-width": true,
      "ja-space-between-half-and-full-width": {
        "space": "always"
      },
      "ja-space-after-exclamation": true,
      "ja-space-after-question": true,
      "ja-space-around-code": false,
      "ja-space-around-link": false
    }
  }
}

今回はとりあえず保存時のスペース挿入を有効にするため、次のように設定しました。

{
  "rules": {
    "preset-ja-spacing": {
      "ja-space-between-half-and-full-width": {
          "space": "always"
      }
    }
  }
}

VS Code 拡張のインストール

textlint の VS Code 拡張をインストールします。

code --install-extension taichi.vscode-textlint

settings.json の修正

settings.jsonを次のように修正します。

{
  "textlint.autoFixOnSave": true,
  "textlint.languages": ["markdown"]
}

textlint.autoFixOnSave を有効化し、ファイル保存時に lint が自動適用されるようにします。

textlint.languages では次のファイルフォーマットが指定可能です。

markdown
plaintext
html
tex
latex
doctex

今回はひとまずマークダウンを対象にしたいので markdown を指定します。

動作確認

次のように lint 違反の記述をした状態で command + s などで保存操作をすると、まずは違反箇所でエラーが表示されます。

そして 2 度目の保存操作時に自動修正が適用されます。

1 度目の保存時に修正が適用されないのが、Prettier の VS Code 拡張との挙動の違いとなっています。1 度で適用されるようにする設定があるかと思いましたが見つけられませんでした。

日本語の textlint のルールをさらに追加したい場合

他の条件によりスペースを挿入するルールはこちら。

スペース挿入以外の様々な日本語に関するルールはこちら。

私も色々漁ってみたいと思います。

注意点

プロジェクトルートにある README ファイルに自動修正が適用されない

次のようになぜか「プロジェクトルートにある README ファイル」のみ自動修正が適用されない挙動となりました。

適用されない：

./README.md

適用される：

./hoge.md
./sub/README.md

原因がわかる方いたら教えてくださると助かります。

意図しないワークスペースで VS Code Textlint Extension が動いてエラーとなる場合

Textlint を使用しないワークスペースで、コンフィグが見つからない場合や、Textlint が未インストールの場合は、Extension が意図せず動いて次のようなエラーとなります。

[Warn  - 12:49:00 AM] No textlint configuration (e.g .textlintrc) found in /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/cdk_sample_app .
File will not be validated. Consider running the 'Create .textlintrc file' command.
[Warn  - 12:49:01 AM] No textlint configuration (e.g .textlintrc) found in /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/cdk_sample_app .
File will not be validated. Consider running the 'Create .textlintrc file' command.
[Error - 12:49:02 AM] Failed to load the textlint library in /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/cdk_sample_app .
To use textlint in this workspace please install textlint using 'npm install textlint' or globally using 'npm install -g textlint'.
You need to reopen the workspace after installing textlint.
[Error - 12:49:02 AM] Failed to load the textlint library in /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/cdk_sample_app .
To use textlint in this workspace please install textlint using 'npm install textlint' or globally using 'npm install -g textlint'.
You need to reopen the workspace after installing textlint.

この場合は下記の方法でワークスペースごとに Textlint Extension を無効化するなどして対応しましょう。